<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<style>
    input{display:inlne;float:left;}
    a{text-decoration: none;color: gray;}
</style>
<body>
      <div id="app" style="display: flex;justify-content: center;" >
          <!--设立一个div-->
          <div>
              <h2>欢迎注册</h2>
              <br>
              <!--input的应用-->
              <input v-model="username" placeholder="用户名称"><br><br>
          
              <input type="text" v-if="pwdType" v-model="eyetxt">
              <input type="password" placeholder="请输入密码" v-model="eyetxt" v-else >
              <!-- 密码后面一般还有一个小眼睛，黑色的时候密码隐藏，蓝色的时候密码显示，我是用的图片 -->
              <img :src="seen ? seenImg : unseenImg" @click="changeType()" class="eye_img" style="display:inlne;float:left;width: 30px;height: 30px;"/>
              <br>
              <button v-on:click="submit" class="btn btn-primary"style="margin-top:10px;width:186px">提交</button>
              <hr>
              <a href="http://">如已注册,请点此处登陆</a>
          </div>
          <!-- <template v-else> -->
            <!--设立一个div-->
            <!-- <div>
                <h2>欢迎登陆</h2>
                <br>
                input的应用 -->
                <!-- <input v-model="username" placeholder="用户名称"><br><br>
                <input type="text" v-if="pwdType" v-model="eyetxt">
                <input type="password" placeholder="请输入密码" v-model="eyetxt" v-else > -->
                <!-- 密码后面一般还有一个小眼睛，黑色的时候密码隐藏，蓝色的时候密码显示，我是用的图片 -->
                <!-- <img :src="seen ? seenImg : unseenImg" @click="changeType()" class="eye_img" style="display:inlne;float:left;width: 30px;height: 30px;"/>
                <br>
                <button  class="btn btn-primary"style="margin-top:10px;width:186px">登陆</button>
                <hr>
            </div>
      </template> -->

      </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
              username: '',
              password: '',
              seen:'',
  			unseenImg:"img/2.jpg",//看不见
  			seenImg :"img/1.jpg",//看得见密码
  			eyetxt:"",
  			pwdType:false, //此时文本框隐藏，显示密码框 
            },
            methods: {
              submit() {
                  if (this.password === "123123") {
                      if (con) alert("注册成功");
                      else alert("取消提交");
                  }else {
                      alert("注册成功！")
                //       alert("注册成功", "温馨提示","确定",function(){
                //         if(this.loginType=='reg'){
                // this.loginType='reg'
                //      }
                // else{
                // this.loginType='login
                  }
              },
              //密码的显示隐藏
  			changeType:function(){
  				this.seen = !this.seen;//小眼睛的变化
  				this.pwdType=!this.pwdType;//跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
  			}
            }
        })
    </script>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>